<template>
  <div id="mune">
    <div class="top">
        <i class="el-icon-search" >
            <input class="top-search" placeholder="Search">
        </i>
    </div>
    <div class="user">
        <div class="headPortrait">
            <img src="~assets/img/1.jpg">
        </div>
        <div class="userName">
            <i>Lin Kaixin</i>
        </div>
        <div class="user-location">
            <i class="el-icon-location"></i> <i>China Shantou</i>
        </div>
    </div>
    <div >
        <el-menu
        class="el-menu-vertical-demo">
            <el-menu-item index="2" class="el-menu-item">
                <i class="el-icon-folder-opened"> </i>
                <span slot="title" class="tabbar-item">Feed</span>
            </el-menu-item>
            <el-menu-item index="2" class="el-menu-item">
                <i class="el-icon-orange"></i>
                <span slot="title" class="tabbar-item">Explor</span>
            </el-menu-item>
            <el-menu-item index="2" class="el-menu-item">
                <i class="el-icon-user-solid"></i>
                <span slot="title" class="tabbar-item">Friends</span>
            </el-menu-item>
            <el-menu-item index="2" class="el-menu-item">
                <i class="el-icon-s-opportunity"></i>
                <span slot="title" class="tabbar-item">Rewards</span>
            </el-menu-item>
            <el-menu-item index="2" class="el-menu-item">
                <i class="el-icon-s-tools"></i>
                <span slot="title" class="tabbar-item">Settings</span>
            </el-menu-item>
        </el-menu>
    </div>
  </div>
</template>

<script>


export default {
}
</script>

<style lang="less" scoped>
#mune {
    width: 6.6rem;
    height: calc(100vh - 1.3rem);
    background-color: rgb(103, 94, 84);
    .top{
        position: relative;
        top: 0.3rem;
        width: 5.6rem;
        height: 0.67rem;
        margin: auto;
        background-color: rgb(95, 86, 78);
        border-radius: 0.77rem;
        padding: 0 0.26rem;
        padding-top: 0.13rem;
        
        .top-search {
            display: inline-block;
            font-size: 0.49rem;
            width: 4rem;
            height: 0.53rem;
            background-color: rgb(95, 86, 78);
            margin-left: 0.13rem;
            margin-top: -0.04rem;
            border: 0 ;
        }
    } 
    
    .user{
        position: relative;
        top: 0.6rem;
        height: 5.3rem;
        .user-location {
            width: 5.3rem;
            text-align: center;
            font-size: 0.3rem;
            margin: auto;
        }
        .userName {
            width: 5.3rem;
            text-align: center;
            font-size: 0.3rem;
            margin: auto;
            color:white
        }
        .headPortrait {
            width: 2.8rem;
            height: 2.8rem;
            border-radius: 2.8rem;
            margin: 0.4rem auto;
            
            overflow: hidden;
            img {
                width:2.8rem;
                height:2.8rem;
            }
        }
    }
    .el-menu-vertical-demo {
        font-size:0.3rem;
        background-color: rgb(103, 94, 84);
        
        .el-menu-item {
            height: 1.2rem !important;
            .tabbar-item {  
                display: inline-block;
                text-align: left;
                width: 4rem;
                height: 1.2rem !important;
                margin: auto 0.4rem;
                font-size: 0.49rem;
                color:white;
            }
        }
    }
}
.el-icon-search::before {
    font-size: 0.49rem;
    color: rgb(162, 157, 151);
}



.el-icon-location::before {
  font-size: 0.3rem;
  color: rgb(133, 210, 197);
}


.el-icon-folder-opened::before {
    font-size: 0.53rem;
    color: rgb(241, 126, 86);
}
.el-icon-orange::before {
    
    font-size: 0.53rem;
    color: rgb(74, 255, 255);
}
.el-icon-user-solid::before {
    font-size: 0.53rem;
    color: rgb(173, 143, 183);
}
.el-icon-s-opportunity::before {
    font-size: 0.53rem;
    color: rgb(250, 219, 155);
}
.el-icon-s-tools::before {
    font-size: 0.53rem;
    color: rgb(168, 163, 159);
}
</style>
